<template>
  <div class="edit-min-box">
    <!-- 工作经历：时间-学校名称-专业 -->
    <div class="edit-item">
      <div class="item">
        <input
          class="input_dash"
          v-model="info.attr1"
          @change="dataChange(1)"
          :style="inputStyle"
        />
      </div>
      <div class="item">
        <input
          class="input_dash"
          v-model="info.attr2"
          @change="dataChange(2)"
          :style="inputStyle"
        />
      </div>
      <div class="item" v-if="attr3">
        <input
          class="input_dash"
          v-model="info.attr3"
          @change="dataChange(3)"
          :style="inputStyle"
        />
      </div>
      <div class="item" v-if="attr4">
        <input
          class="input_dash"
          v-model="info.attr4"
          @change="dataChange(4)"
          :style="inputStyle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      info: {
        attr1: '',
        attr2: '',
        attr3: '',
        attr4: '',
      },
    }
  },
  props: {
    attr1: {
      type: String,
      default: '2016-2020',
    },
    attr2: {
      type: String,
      require: true,
    },
    attr3: {
      type: String,
      default: '',
    },
    attr4: {
      type: String,
      default: '',
    },
    fontWeight: {
      type: String,
      default: 'normal',
    },
  },
  computed: {
    inputStyle() {
      return {
        width: '120px',
        fontSize: this.myFontSize,
      }
    },
    ...mapGetters(['myFontSize']),
  },
  methods: {
    dataChange(index) {
      let newVal = ''
      switch (index) {
        case 1:
          newVal = this.info.attr1
          break
        case 2:
          newVal = this.info.attr2
          break
        case 3:
          newVal = this.info.attr3
          break
        case 4:
          newVal = this.info.attr4
          break
      }
      this.$emit('attrUpdate', { index, newVal })
    },
  },
  created() {
    this.info.attr1 = this.attr1
    this.info.attr2 = this.attr2
    this.info.attr3 = this.attr3
    this.info.attr4 = this.attr4
  },
}
</script>

<style scoped lang="less">
.edit-min-box {
  width: 100%;
}
.edit-item {
  display: flex;
  justify-content: normal;
  justify-content: space-around;
  padding: 0;
}
.item {
  padding: 8px 5px;
}
.input_dash {
  border-color: white;
  border-width: 0ch;
  text-align: left;
  border-color: white;
  border-width: 1px;
  border-style: dotted;
  background-color: transparent;
  color: black;
  line-height: 1.5;
}
.input_dash:focus {
  background: none;
  outline: none;
  border: 0px;
  border-color: tomato;
  border-width: 1px;
  border-style: dotted;
}
</style>
